<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //对象转查询字符串
    function objToSearchString(obj){
        var str=''
        for(var key in obj ){
            str+=`${key}=${obj[key]}&`
        }
        return str.slice(0,str.length-1)
    }
    //封装ajax函数
    function ajax(method,url,params,cb){
        var xhr = new XMLHttpRequest()
        xhr.open(method,method=='get' ? url +"?"+objToSearchString(params):url)
    
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            cb(JSON.parse(xhr.responseText))
        }}
    //先对post设置 content-type请求头
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(method=='get'?null:objToSearchString(params))
    }
    ajax('get','https://yantianfeng.com/api/emotion',{page:1,count:5},function(data){
        console.log(data);})
    ajax('post','https://yantianfeng.com/api/emotion',{page:1,count:5},function(data){
        console.log(data);})
    // <!-- 深拷贝，单例，发布订阅，防抖，节流，ajax的封装，单页面路由 -->
</script>
</html>
